<template>
  <div class="bd1">
    <div class="menu-container">
      <my-menu></my-menu>
    </div>
    <div class="table-container">
      <!-- 搜索框 -->
      <el-form :inline="true" :model="searchForm" class="demo-form-inline">
        <el-form-item label="用户名">
          <el-input
            v-model="searchForm.title"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="handleSearch">查询</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="currentData" style="width: 100%">
        <el-table-column
          prop="custom_id"
          label="配送员ID"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="c_name"
          label="姓名"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="c_phone"
          label="电话"
          width="180"
        ></el-table-column>
        <el-table-column
          prop="c_address"
          label="地址"
          width="180"
        ></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="removeUsers(scope.row.custom_id)" type="text"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination-container">
        <el-pagination
          :total="totalItems"
          :page-size="pageSize"
          :current-page="currentPage"
          layout="prev, pager, next, jumper"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import menu from "../components/menu.vue";
import { getDelivery } from "@/utils/api/delivery";
import { allUsersList, deleteUsers, SearchUser } from "../utils/api/getAllUser";
export default {
  components: {
    "my-menu": menu,
  },
  data() {
    return {
      deliveryData: [],
      totalItems: 0, // 总条目数
      pageSize: 10, // 每页显示条目个数
      currentPage: 1, // 当前页码
      searchForm: {
        title: "",
      },
    };
  },
  methods: {
    setCurrentData() {
      // 计算当前页的数据
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      this.currentData = this.deliveryData.slice(start, end);
    },
    handlePageChange(newPage) {
      this.currentPage = newPage;
      this.setCurrentData(); // 更新当前页数据
    },
    fetchData() {
      allUsersList().then((response) => {
        console.log(response.data.data);
        this.deliveryData = response.data.data;
        this.totalItems = this.deliveryData.length; // 设置总条目数
        this.setCurrentData(); // 设置当前页数据
      });
    },
    async removeUsers(newsId) {
      console.log("newsId", newsId);
      try {
        const confirmResult = await this.$confirm(
          "确认删除这条新闻吗？",
          "提示",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        );

        if (confirmResult === "confirm") {
          const res = await deleteUsers(newsId);
          if (res.data.code === 200) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
          }
          this.fetchData();
        }
      } catch (error) {
        // 用户点击取消时会抛出异常，可以忽略
      }
    },
    async handleSearch() {
      const res = await SearchUser(this.searchForm.title);
      console.log("搜索新闻结果", res);
      this.currentData = res.data.data;
      this.totalItems = res.data.data.length; // 设置总条目数
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      this.currentData = res.data.data.slice(start, end);
      console.log('0000000000000',this.urrentData);
    },
  },

  created() {
    this.fetchData();
  },
};
</script>

<style>
.bd1 {
  display: flex; 
  justify-content: space-between;
  align-items: flex-start; 
  background-color: rgb(245, 252, 241);
  width: 100%;
  height: 781px;
  background-size: 100% 100%;
}

.menu-container {
  width: 200px; 

}

.table-container {
  flex-grow: 1; /* 剩余空间 */
}
.demo-form-inline{
  margin-top: 30px;
  margin-left: 20px;
}
</style>
